<template>
    <div class="login">
        <div class="top">
            <img src="img/login-bg.png" />
        </div>
        <div class="miss">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        style="margin-bottom: 15px; border-radius: 7px"
                        v-model="formData.phone"
                        center
                        clearable
                        left-icon="phone"
                        placeholder="请输入手机号码"
                        :rules="[{ required: true, message: '请填写手机号码' }]"
                    >
                        <template #button>
                            <van-button
                                size="small"
                                type="primary"
                                :disabled="code.btnDis"
                                @click="setCode"
                                >{{ code.btnText }}</van-button
                            >
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        style="
                            height: 53px;
                            align-items: center;
                            border-radius: 7px;
                        "
                        v-model="formData.safrtycode"
                        name="短信验证码"
                        left-icon="lock"
                        placeholder="请输入短信验证码"
                        :rules="[
                            { required: true, message: '请填写短信验证码' },
                        ]"
                    />
                </van-cell-group>
                <van-divider style="margin: 10px 20px" />
                <van-cell-group inset>
                    <van-field
                        v-model="formData.registerid"
                        style="
                            height: 53px;
                            align-items: center;
                            border-radius: 7px;
                        "
                        placeholder="注册证号码"
                        :rules="[
                            { required: true, message: '请填写注册证号码' },
                        ]"
                    />
                </van-cell-group>
                <div class="agree" style="margin: 20px 20px">
                    <van-checkbox
                        v-model="checked"
                        shape="square"
                        icon-size="14px"
                        >已阅读并同意</van-checkbox
                    >
                    <van-button type="primary" @click="buypop" class="buy"
                        >《购买须知》</van-button
                    >
                </div>
                <van-popup
                    v-model:show="show"
                    position="bottom"
                    :style="{ height: '100%' }"
                    closeable
                    close-icon="close"
                >
                    <div class="tip">
                        <h3>《精彩奥运购买须知》</h3>
                        <p>
                            a 进入New
                            Balance中国官方商城后，点击网站右上方的“注册”。 b
                            将进入注册页面后
                            ，在相应提示处输入您的相关信息后点击“提交”即可。如果提交的信息有误，点击提交后会有错误提示，请修改后重新提交。
                            c
                            提交成功后，将进入我的账户页面，即注册成功！稍后您会收到我们注册成功的提示邮件。
                            d New
                            Balance中国官方商城注册用户可方便地管理和查询订单，并可收到来自New
                            Balance的时尚快报，还有机会参与丰富多彩的优惠活动！
                        </p>
                        <p>
                            a
                            用户登录/注册，如果您是会员，请点击右上角的登录；如果您是非会员，请先注册，然后登录。
                            b 挑选心仪的商品 c 加入购物车或立即购买 d
                            确认您购买的产品信息并正确填写您的物流信息 e
                            进入结算中心，选择支付方式，我们提供的支付方式有：支付宝支付和微信支付。
                            f
                            如您需要普通发票，在支付页面，可以填写发票申请信息。如果您需要开具的是：“增值税专用发票”，请您及时联系New
                            Balance中国官方商城客服，以便我们与您核实信息。 g
                            完成上述所有流程后您可以点击“提交订单”，进入支付环节，订单支付完成后页面会显示您的订单号。提交订单表示您已经阅读并接受了商城的“使用条款",“隐私政策”以及“退换货政策”。
                            h
                            因在线销售存在库存更新网络延时的情况，可能会有付款后订单商品出现缺货的情况，如有该类情况，售后人员会及时通知您，您可以选择退货，给您造成的不便，还请谅解。
                        </p>
                        <p>
                            a
                            在订单提交以前，若您有信息需要修改，请在订单确认页面直接修改，若订单已经提交，将无法修改订单内容，您可以请联系客服取消订单并重新下单购买。
                            b
                            若您需要取消订单，付款后请尽快联系客服取消。因网络延时取消不一定成功，若已经发货请直接拒收。若您需要在非工作时间取消订单，请给客服留言您的订单号，您的会员ID以及联系方式，我们客服上班后会尽快联系您处理。
                            c
                            商城根据如下规则将逾期订单自动取消：如果您的订单未在1个小时内付款，系统将自动取消您的订单。
                        </p>
                    </div>
                </van-popup>
                <div style="margin: 16px">
                    <van-button
                        round
                        block
                        type="primary"
                        native-type="submit"
                        style="border-radius: 7px"
                    >
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
import tool from "@/tool";
export default {
    data() {
        return {
            code: {
                btnDis: false,
                btnText: "发送验证码",
                timeWrap: null,
                setTimeNum: 60,
            },
            checked: true,
            show: false,
            formData: {
                phone: "1",
                safrtycode: "1",
                registerid: "1",
            },
        };
    },
    watch: {
        // 监听按钮倒计时时间
        "code.setTimeNum"(newVal, oldVal) {
            if (newVal < 0) {
                clearInterval(this.code.timeWrap);
                this.code.setTimeNum = 10;
                this.code.btnText = "发送验证码";
                this.code.btnDis = false;
            }
        },
    },
    methods: {
        // 提交
        async onSubmit(values) {
            if (this.checked == false) {
                Toast.fail("请阅读并勾选购买须知");
            } else {
                var data = this.formData;
                var res = await this.$API.order.SaveOrder.post(data);
                if (res.type == 1) {
                    this.$router.replace({
                        path: "/main",
                    });
                } else {
                    Toast.fail(res.message);
                }
            }
        },
        // 点击获取验证码 通过与session中的时间戳做对比判断
        setCode() {
            var n = new Date().getTime();
            var postTiem = tool.getSession("postTime");
            if (!postTiem) {
                tool.setSession("postTime", n);
                this.code.btnDis = true;
                this.code.timeWrap = setInterval(() => {
                    this.code.setTimeNum -= 1;
                    this.code.btnText = "短信倒计时 " + this.code.setTimeNum;
                }, 1000);
            } else {
                if (n - postTiem < this.code.setTimeNum * 1000) {
                    let time = (this.code.setTimeNum - (n - postTiem)/1000).toFixed(0)
                    Toast.fail({
                        message: "请勿频繁获取验证码,请 "+time+' 秒后再试',
                        forbidClick: true,
                    });
                } else {
                    tool.setSession("postTime", n);
                    this.code.btnDis = true;
                    this.code.timeWrap = setInterval(() => {
                        this.code.setTimeNum -= 1;
                        this.code.btnText =
                            "短信倒计时 " + this.code.setTimeNum;
                    }, 1000);
                }
            }
        },
        buypop() {
            this.show = true;
        },
    },
};
</script>
<style lang="scss">
</style>